<template>
  <div>
    <div class="badge">
      <div class="demo-inner-divider">基础类徽标</div>
      <e-badge class="badge-margin" :count="9" >
        <a href="#" class="demo-badge"></a>
      </e-badge>
      <e-badge class="badge-margin" :count="100" :overflow-count="99">
        <a href="#" class="demo-badge"></a>
      </e-badge>
      <e-badge :count="200" :overflow-count="199">
        <a href="#" class="demo-badge"></a>
      </e-badge>
    </div>
    <div class="badge">
      <div class="demo-inner-divider">点式徽标</div>
      <div class="demo-badge-dot">
        <div>
          <e-badge dot class="badge-margin">
            <a href="#" class="demo-badge"></a>
          </e-badge>
        </div>

        <!-- <div>
          <e-badge dot>
            <div>
              <e-icon type="notification" size="30"> </e-icon>
            </div>
          </e-badge>
        </div> -->
        <div>
          <e-badge dot class="badge-margin dot-style" >
            <div class="demo-text"> 示意文字</div>
          </e-badge>
        </div>
      </div>
    </div>
    <div class="badge">
      <div class="demo-inner-divider">文字式徽标</div>
      <e-badge text="New" class="badge-margin">
        <a href="#" class="demo-badge"></a>
      </e-badge>
      <e-badge class="badge-margin border-square" text="文字">
        <a href="#" class="demo-badge"></a>
      </e-badge>
    </div>
    <div class="badge">
      <div class="demo-inner-divider">独立使用及自定义样式</div>
      <e-badge status="error"></e-badge>
      <e-badge class="badge-margin " custom= "bubble" text="H"></e-badge>
      <e-badge class="badge-margin" text="New"></e-badge>
      <e-badge class="badge-margin border-square" text="文字"></e-badge>
      <e-badge class="badge-margin count-style " :count="99" :overflow-count="200"> </e-badge>
      <e-badge class="badge-margin" :count="100"></e-badge>
    </div>

    <div class="badge">
      <div class="demo-inner-divider">纯色绶带</div>
      <e-badge class="badge-margin-max" text="Happy" ribbon="solid">
        <a href="#" class="demo-badge-max ribbon-margin1"></a>
      </e-badge>
      <e-badge class="badge-margin-max" text="折扣" ribbon="solid">
        <a href="#" class="demo-badge-max ribbon-margin2"></a>
      </e-badge>
      <e-badge class="badge-margin-max" text="100%" ribbon="solid">
        <a href="#" class="demo-badge-max ribbon-margin3"></a>
      </e-badge>
    </div>

    <div class="badge">
      <div class="demo-inner-divider">渐变绶带</div>
      <e-badge class="badge-margin-max" text="HOT" ribbon="gradient">
        <a href="#" class="demo-badge-max ribbon-gradient-margin"></a>
      </e-badge>
      <e-badge class="badge-margin-max" text="FREE" ribbon="gradient">
        <a href="#" class="demo-badge-max ribbon-gradient-margin"></a>
      </e-badge>
    </div>

    <div class="badge">
      <div class="demo-inner-divider">角标徽章</div>
      <e-badge class="badge-margin-max subscript-color" text="惠" subscript="left">
        <a href="#" class="demo-badge-max ribbon-gradient-margin"></a>
      </e-badge>
      <e-badge class="badge-margin-max" text="New" subscript="right">
        <a href="#" class="demo-badge-max ribbon-gradient-margin"></a>
      </e-badge>
      <!-- <e-badge class="badge-margin-max" text="HOT" subscript="three-dimensional ">
        <a href="#" class="demo-badge-max1 ribbon-gradient-margin"></a>
      </e-badge> -->
      <e-badge class="badge-margin-max" text="HOT" subscript="three-dimensional">
        <a href="#" class="demo-badge-max1 ribbon-gradient-margin"></a>
      </e-badge>
    </div>

    <div class="badge">
      <div class="demo-inner-divider">状态点，用于表示状态的小圆点。</div>
      <div>
        <e-badge status="success">
          <template #text>
            <div style="fontsize: 14px">success</div>
          </template>
        </e-badge>
      </div>

      <div>
        <e-badge status="processing">
          <template #text>
            <div style="fontsize: 14px">processing</div>
          </template>
        </e-badge>
      </div>

      <div>
        <e-badge status="default">
          <template #text>
            <div style="fontsize: 14px">default</div>
          </template>
        </e-badge>
      </div>
      <div>
        <e-badge status="error">
          <template #text>
            <div style="fontsize: 14px">error</div>
          </template>
        </e-badge>
      </div>
      <div>
        <e-badge status="warning">
          <template #text>
            <div style="fontsize: 14px">warning</div>
          </template>
        </e-badge>
      </div>
    </div>

    <div class="badge">
      <div class="demo-inner-divider">
        属性 color 可以设置更多预设的状态点颜色，或者自定义颜色。
      </div>
      <div>
        <e-badge color="blue" text="blue" />
      </div>
      <div>
        <e-badge color="green" text="green" />
      </div>
      <div>
        <e-badge color="red" text="red" />
      </div>
      <div>
        <e-badge color="yellow" text="yellow" />
      </div>
      <div>
        <e-badge color="pink" text="pink" />
      </div>
      <div>
        <e-badge color="magenta" text="magenta" />
      </div>
      <!-- <div>
        <e-badge color="volcano" text="volcano" />
      </div> -->
      <div>
        <e-badge color="orange" text="orange" />
      </div>
      <div>
        <e-badge color="gold" text="gold" />
      </div>
      <div>
        <e-badge color="lime" text="lime" />
      </div>
      <div>
        <e-badge color="cyan" text="cyan" />
      </div>
      <!-- <div>
        <e-badge color="geekblue" text="geekblue" />
      </div> -->
      <div>
        <e-badge color="purple" text="purple" />
      </div>
      <div>
        <e-badge color="#2db7f5" text="#2db7f5" />
      </div>
      <div>
        <e-badge color="#f50" text="#f50" />
      </div>
    </div>

    <div class="badge">
      <div class="demo-inner-divider">使用 type 属性，可以设置不同的颜色。</div>
      <div>
        <e-badge class="badge-margin" :count="5" type="primary">
          <a href="#" class="demo-badge"></a>
        </e-badge>
        <e-badge class="badge-margin" :count="5" type="success">
          <a href="#" class="demo-badge"></a>
        </e-badge>
        <e-badge class="badge-margin" :count="5" type="normal">
          <a href="#" class="demo-badge"></a>
        </e-badge>
        <e-badge class="badge-margin" :count="5" type="error">
          <a href="#" class="demo-badge"></a>
        </e-badge>
        <e-badge class="badge-margin" :count="5" type="warning">
          <a href="#" class="demo-badge"></a>
        </e-badge>
        <e-badge class="badge-margin" :show-zero="true" :count="0" type="info">
          <a href="#" class="demo-badge"></a>
        </e-badge>
      </div>
    </div>
    <badge-md class="markdown-body"></badge-md>
  </div>
</template>
<script>
import badgeMd from '../../docs/badge.md'
export default {
  props: {},
  components: {
    badgeMd,
  },
  data() {
    return {
      count: 290,
    }
  },
}
</script>
<style lang="less" scoped>
.badge-margin {
  margin-right: 15px;
}
.badge-margin-max {
  margin-right: 30px;
}
.ribbon-margin1 {
  margin-right: 3px;
}
.ribbon-margin2 {
  margin-right: 8px;
}
.ribbon-margin3 {
  margin-right: 6px;
}
.ribbon-gradient-margin {
  margin-right: -8px;
}
.border-square {
  /deep/.haloe-badge-count {
    border-radius: 2px;
  }
}

.count-style{
  /deep/.haloe-badge-count {
    width: 25px;
  }
}
.dot-style{
  /deep/.haloe-badge-dot {
    width: 8px;
    height: 8px;
  }
}
.border-triangle {
  /deep/.haloe-badge-count {
    border-radius: 2px 2px 2px 0px;
  }
}

.subscript-color {
  /deep/.haloe-badge-status-subscript-left {
    background-color: #FF931D ;   
  }
}

.demo-badge {
  width: 42px;
  height: 42px;
  background: #eee;
  border-radius: 6px;
  display: inline-block;
}
.demo-text {
  width: 48px;
  height: 18px;
  line-height: 18px;
  color:#6F7D96
}
.demo-badge-max {
  width: 140px;
  height: 89px;
  background: #eee;
  border-radius: 6px;
  display: inline-block;
}

.demo-badge-max1 {
  width: 332px;
  height: 113px;
  background: #eee;
  border-radius: 6px;
  display: inline-block;
}

.demo-inner-divider {
  margin-bottom: 15px;
}
.badge {
  margin-bottom: 60px;
}
</style>
<style>
.demo-badge-dot{
  display: flex;
  align-items: center;
}
</style>
